নিচের ক্লাসগুলো ব্যবহার করে টেক্সট-কালার দিয়ে টেক্সটের অর্থ যোগ করা যায়। লিংকের ক্ষত্রে হোভারে গাঢ় বর্ণ ধারন করবেঃ
ক্লাস | বর্ণনা | উদাহরণ |
---|---|---|
.text-muted | টেক্সটটি "text-muted" ক্লাসের মাধ্যমে স্টাইল করা হয়েছে | উদাহরণ দেখুন |
.text-primary | টেক্সটটি "text-primary" ক্লাসের মাধ্যমে স্টাইল করা হয়েছে | উদাহরণ দেখুন |
.text-success | টেক্সটটি "text-success" ক্লাসের মাধ্যমে স্টাইল করা হয়েছে | উদাহরণ দেখুন |
.text-info | টেক্সটটি "text-info" ক্লাসের মাধ্যমে স্টাইল করা হয়েছে | উদাহরণ দেখুন |
.text-warning | টেক্সটটি "text-warning" ক্লাসের মাধ্যমে স্টাইল করা হয়েছে | উদাহরণ দেখুন |
.text-danger | টেক্সটটি "text-danger" ক্লাসের মাধ্যমে স্টাইল করা হয়েছে | উদাহরণ দেখুন |
নিচের ক্লাসগুলো ব্যবহার করে ব্যাকগ্রাউন্ড-কালার দিয়ে টেক্সটের অর্থ যোগ করা যায়। হোভার করলএ লিঙ্কগুলো গাঢ় বর্ণ ধারন করবেঃ
ক্লাস | বর্ণনা | উদাহরণ |
---|---|---|
.bg-primary | টেবিল সেলটি "bg-primary" ক্লাস দিয়ে সেলটি স্টাইল করা হয়েছে | উদাহরণ দেখুন |
.bg-success | টেবিল সেলটি "bg-success" ক্লাস দিয়ে স্টাইল করা হয়েছে | উদাহরণ দেখুন |
.bg-info | টেবিল সেলটি "bg-info" ক্লাস দিয়ে স্টাইল করা হয়েছে | উদাহরণ দেখুন |
.bg-warning | টেবিল সেলটি "bg-warning" ক্লাস দিয়ে স্টাইল করা হয়েছে | উদাহরণ দেখুন |
.bg-danger | টেবিল সেলটি "bg-danger" ক্লাস দিয়ে স্টাইল করা হয়েছে | উদাহরণ দেখুন |
ক্লাস | বর্ণনা | উদাহরণ |
---|---|---|
.pull-left | একটি এলিমেন্টেকে বামে এ্যালাইন করতে ব্যবহার করা হয় | উদাহরণ দেখুন |
.pull-right | একটি এলিমেন্টেকে ডানে এ্যালাইন করতে ব্যবহার করা হয় | উদাহরণ দেখুন |
.center-block | একটি এলিমেন্টে display:block , margin-right:auto এবং margin-left:auto সেট করতে সাহায্য করে | উদাহরণ দেখুন |
.clearfix | ফ্লোট বাদ দেওয়ার জন্য ব্যবহার করা হয় | উদাহরণ দেখুন |
.show | একটি এলিমেন্টকে প্রদর্শন করতে ব্যবহার করা হয় | উদাহরণ দেখুন |
.hidden | একটি এলিমেন্টকে হাইড করতে ব্যবহার করা হয় | উদাহরণ দেখুন |
.sr-only | স্ক্রিনরিডার ছাড়া বাকি সকল ডিভাইসে একটি এলিমেন্টকে হাইড করে | উদাহরণ দেখুন |
মেডিয়া কুয়েরির মাধ্যমে ডিভাইসে কন্টেন্ট দেখাতে/হাইড করতে এই ক্লাসগুলো ব্যবহার করা হয়।
কন্টেন্টকে সকল ডিভাইসে ঠিকভাবে প্রদর্শনের জন্য এক বা একাধিক ক্লাস ব্যবহার করা যেতে পারেঃ
ক্লাসের মাধ্যমে স্টাইল করা হয়েছে
ক্লাস | অতিরিক্ত ছোট ডিভাইস মোবাইল (<৭৬৮পিক্সেল) | ছোট ডিভাইস ট্যাবলেট (≥৭৬৮পিক্সেল) | মাঝারি ডিভাইস ডেস্কটপ (≥৯৯২পিক্সেল) | বড় ডিভাইস ডেস্কটপ (≥১২০০পিক্সেল) |
---|---|---|---|---|
.visible-xs-* | দেখা যাবে | দেখা যাবে না | দেখা যাবে না | |
.visible-sm-* | দেখা যাবে না | দেখা যাবে | দেখা যাবে না | দেখা যাবে না |
.visible-md-* | দেখা যাবে না | দেখা যাবে না | দেখা যাবে | দেখা যাবে না |
.visible-lg-* | দেখা যাবে না | দেখা যাবে না | দেখা যাবে না | দেখা যাবে |
.hidden-xs | দেখা যাবে না | দেখা যাবে | দেখা যাবে | দেখা যাবে |
.hidden-sm | দেখা যাবে | দেখা যাবে না | দেখা যাবে | দেখা যাবে |
.hidden-md | দেখা যাবে | দেখা যাবে | দেখা যাবে না | দেখা যাবে |
.hidden-lg | দেখা যাবে | দেখা যাবে | দেখা যাবে | দেখা যাবে না |
৩.২.০ ভার্সনে, .visible-*-*
ক্লাসের তিনটি ভ্যারিয়েশন দেওয়া হয় হয়েছে। প্রত্যকটির জন্য সিএসএস display
প্রোপার্টির যে ভ্যালু ব্যবহার করা হয়েছে তা দেখানো হলোঃ
ক্লাস | সিএসএস ডিসপ্লে ভ্যালু |
---|---|
visible-*-block | display: block; |
.visible-*-inline | display: inline; |
.visible-*-inline-block | display: inline-block; |
উদাহরনঃ ছোট (sm
)স্ক্রিনের জন্য, ব্যবহারযোগ্য .visible-*-*
ক্লাসগুলো হলোঃ .visible-sm-block
, .visible-sm-inline
, and .visible-sm-inline-block
.visible-xs
, .visible-sm
, .visible-md
, এবং .visible-lg
ক্লাসগুলো ৩.২.০ ভার্সনে অনুমোদিত করা হয়।
kt_satt_skill_example_id=1099
আরও দেখুন...